<template>
	<div id="shop_seller">
		<div class="shop_seller_wrapper" ref="sellerWrapper">
			<div class="shop_content">
				<!--height：auto起到better-scroll作用-->

				<div class="shop_seller_top">
					<div class="shop_content_top" style="padding: 18px;">
						<div style="border-bottom: 1px solid rgb(204,204,204,0.27);margin-bottom: 16px;">
							<div style="display: flex;">
								<div style="flex: 1;margin:5px 0 0 5px;">
									<h3 class="shop_name">{{sellerList.name}}</h3>
									<div style="margin: 10px 10px 10px 0;">
										<div style="vertical-align: middle;display: inline;">
											<star :score="2.6" :size="36"></star>
										</div>
										<span class="month_sell">月售{{sellerList.sellCount}}单</span>
									</div>

								</div>
								<div style="width: 40px;text-align: center;">
									<span class="icon-favorite"></span>
									<p style="font-size: 12px;">已收藏</p>
								</div>
							</div>
						</div>
						<div class="shop_content_bottom">
							<div class="delivery_down text_center border_right1px">
								<span class="delivery_title">起送价</span>
								<p class="font_size10"><span class="font_size24">{{sellerList.minPrice}}</span>元</p>

							</div>
							<div class="delivery_shop text_center border_right1px">
								<span class="delivery_title">商家配送</span>
								<p class="font_size10"><span class="font_size24">{{sellerList.deliveryPrice}}</span>元</p>

							</div>
							<div class="delivery_time text_center border_right1px">
								<span class="delivery_title">平均配送时间</span>
								<p class="font_size10"><span class="font_size24">{{sellerList.deliveryTime}}</span>分钟</p>

							</div>
						</div>
					</div>

				</div>

				<div class="announce_wrapper" style="margin-bottom: 18px;">
					<div class="announce_history">
						<div class="border_bottom1px">
							<h4 class="announce_title">广告与活动</h4>
							<p class="announce_content">
								{{sellerList.bulletin}}
							</p>
						</div>
						<ul>
							<li class="border_bottom1px activity_list" v-for="(supports,index) in sellerList.supports">
								<span class="announce_icon" :class="classMap[index]"></span>
								<span>{{supports.description}}</span>
							</li>

						</ul>
					</div>

				</div>
				
				

			</div>

		</div>
	</div>
</template>

<script>
	import shopcat from '../shopcat/shopcat';
	import BScroll from 'better-scroll';
	import star from '../star/star';
	import { mapState } from 'vuex';

	export default {
		name: 'seller',
		data() {
			return {
				sellerList: []
			}
		},
		created() {
			this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

			this.$store.dispatch('getSellerJson').then(() => { //vuex的公共数据
				this.sellerList = this.$store.state.sellerList
				//console.log(this.sellerList)
				this.$nextTick(function() {
					this.sellerWrapper = new BScroll(this.$refs.sellerWrapper, {
						click: true
					});

				})
			})

		},
		methods: {
			getSeller() {

			}
		},
		components: {
			shopcat,
			star
		}
	}
</script>

<style 1scoped>
	.text_center {
		text-align: center!important;
	}
	
	.font_size10 {
		font-size: 10px!important;
	}
	
	.font_size24 {
		font-size: 24px!important;
	}
	
	.border_right1px {
		border-right: 1px solid rgb(204, 204, 204, 0.27)!important;
	}
	
	.border_bottom1px {
		border-bottom: 1px solid rgb(204, 204, 204, 0.52)!important;
	}
	
	.border_right1px:last-child {
		border: none!important;
	}
	
	.icon-favorite {
		color: #fa1818;
		display: block;
		margin-bottom: 8px;
		line-height: 24px;
		font-size: 24px;
		color: #d4d6d9;
	}
	
	.delivery_title {
		display: inline-block;
		font-size: 10px;
		line-height: 12px;
		color: rgb(147, 153, 159);
		margin-bottom: 4px;
	}
	
	.shop_name,
	.announce_title {
		line-height: 16px;
		color: rgb(7, 17, 27);
		font-size: 16px;
	}
	
	#shop_seller {
		position: absolute;
		top: 182px;
		bottom: 0;
		width: 100%;
		background: #D9DDE1;
	}
	
	.shop_seller_wrapper {
		height: 100%;
		overflow: hidden;
	}
	
	.shop_seller_top {
		border-bottom: 1px solid rgb(204, 204, 204, 0.62);
		background: #FFFFFF;
		margin-bottom: 18px;
	}
	
	.month_sell {
		font-size: 12px;
		color: rgb(143, 153, 159);
		vertical-align: middle;
		margin-left: 5px;
	}
	
	.shop_content_bottom {
		display: flex;
		justify-content: space-around;
	}
	
	.delivery_down,
	.delivery_shop,
	.delivery_time {
		width: 100%;
	}
	/*公告*/
	
	.announce_wrapper {
		background: #FFFFFF;
	}
	
	.announce_history {
		padding: 16px;
	}
	
	.announce_title {
		margin: 5px 0 8px;
	}
	
	.announce_content {
		padding: 0 12px 10px;
		font-size: 12px;
		font-weight: 200;
		color: rgb(240, 20, 20);
		line-height: 24px;
	}
	/*活动*/
	
	.activity_list {
		padding: 12px;
	}
	
	.activity_icon {
		width: 17px;
		height: 17px;
		vertical-align: middle;
	}
	
	.activity_list span {
		vertical-align: middle;
		font-size: 12px;
		font-weight: 200;
		color: rgb(7, 17, 27);
		line-height: 16px;
	}
	
	.announce_icon {
		display: inline-block;
		width: 17px;
		height: 17px;
	}
	/*公告图标*/
	
	.decrease {
		background: url(../../../resource/img/decrease_3@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.discount {
		background: url(../../../resource/img/discount_3@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.special {
		background: url(../../../resource/img/special_3@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.invoice {
		background: url(../../../resource/img/invoice_3@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.guarantee {
		background: url(../../../resource/img/guarantee_3@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>